<template>
  <!-- 走马灯 -->
  <div class="carousel">
    <el-carousel height="100px" indicator-position="outside">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- 文字内容1 -->
  <el-row>
    <el-col :span="24" class="text">
      <span class="text-One">让我们为您保驾护航</span>
      <span class="text-Two">编程智航提供提供由知识图谱驱动的个性化学习路径</span>
      <span class="text-Tree">为您量身定做学习计划，轻松学习不再是梦！</span>
    </el-col>
  </el-row>
  <!-- 文字内容二 -->
  <el-row class="content">
    <el-col :span="8">
      <span class="GIF">动图</span>
    </el-col>
    <el-col :span="16" class="word">
      <span class="word-One">量身定制学习计划</span>
      <span class="word-Two"
        >根据您的学习能力、知识背景、学习目标等差异性数据，为您<span style="color: #5f53cb">量身定制</span>一条学习路径，并且可以<span style="color: #5f53cb">实时监测</span
        >您的学习状态以调整课程难度</span
      >
    </el-col>
  </el-row>
</template>
<script setup></script>
<style scoped>
.carousel {
  background-color: rgba(95, 83, 203, 0.35); /* 35% 透明度的 #5f53cb */
  margin-left: 25px;
  margin-right: 25px;
}
:deep(.el-carousel__item h3) {
  text-align: center; /**设置走马灯切换的数字居中对齐 */
  line-height: 90px;
}
.text {
  align-items: center; /* 水平居中对齐 */
  display: flex;
  flex-direction: column; /* 垂直排列文字 */
  margin-top: 10px;
}
.text-One {
  color: #5f53cb;
  font-size: 40px;
  font-weight: bold;
}
.text-Two {
  color: black;
  font-size: 20px;
  margin-top: 10px;
}
.text-Tree {
  color: black;
  font-size: 20px;
  margin-top: 10px;
}
.content {
  display: flex;
  background-color: rgba(95, 83, 203, 0.35); /* 35% 透明度的 #5f53cb */
  margin-top: 24px;
  height: 220px;
  align-items: center;
}
.GIF {
  color: #5f53cb;
  font-size: 40px;
  font-weight: bold;
  margin-left: 150px;
}
.word {
  display: flex;
  flex-direction: column; /* 垂直排列文字 */
  align-items: center;
}
.wordOne {
  color: #5f53cb;
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold; /* 加粗 */
}
.wordTwo {
  display: inline-block;
  width: 300px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.5; /* 设置行距 */
}
</style>
